<template>
	<div class="bg">
	<div class="mao">
		<van-nav-bar
		  title="欢迎登录"
		  left-text="返回"
		  fixed
		  left-arrow
		  @click-left="onClickLeft"
		  @click-right="onClickRight"
		/>
		<van-form  @submit="onSubmit">
		  <van-field
		    v-model="username"
		    name="username"
		    label="用户名"
		    placeholder="用户名"
			autocomplete="off"
		    :rules="[{ required: true, message: '请填写用户名' }]"
		  />
		  <van-field
		    v-model="password"
		    type="password"
		    name="password"
		    label="密码"
		    placeholder="密码"
		    :rules="[{ required: true, message: '请填写密码' }]"
		  />
		  <div style="margin: 16px;">
		    <van-button round block type="info" native-type="submit">
		      提交
		    </van-button>
		  </div>
		</van-form>
	</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import { Form ,Field,Button,NavBar,Notify } from 'vant';
	import { Toast } from 'vant';
	import 'vant/lib/index.css';
	import axios from 'axios';
	Vue.use(Button);
	Vue.use(Form);
	Vue.use(Field);
	Vue.use(NavBar)
	
	 export default {
	   data() {
	     return {
	       username: '',
	       password: '',
	     };
	   },
	   methods: {
		 onClickLeft() {
		         this.$router.go(-1)
		     },
	     onClickRight() {
			         Toast('按钮');
			 },
	     onSubmit(values) {
			 this.$store.dispatch('login',values)
	   //     axios.post("http://localhost:9090/login",values)
		  //  .then(
		  //       res=>{
				// 	if(!res.length == 0){
				// 	Notify({ type: 'success', message: '登录成功' });	
				// 	}else{
				// 		Notify({ type: 'danger', message: '登录失败，请再次输入' });
				// 	}
				// }
		  //  )
	     },
	   },
	   // components:{
		  //  [Notify.Component.name]: Notify.Component,
	   // }
	 }
</script>
<style>	
    .bg{
		height: 100%;
		background-image: url(../assets/images/3.png);
		background-size:cover;
		z-index: 2;
	}
	.mao{
		margin-top: 30%;
	}

</style>